<template>
  <el-button type="primary" @click="add">新增</el-button>
  <el-table :data="store.state.dictionaryTable.tableData1" style="width: 100%">
    <el-table-column label="序号" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="名字" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.projectName }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="来源" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.projectSource }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="delData(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 编辑弹窗 -->
  <!-- <el-dialog v-model="dialogVisible" title="编辑字典表" width="30%" draggable>
    <div>
      名称：<el-input v-model="user.projectName"></el-input>

      来源：<el-input v-model="user.projectSource"></el-input>
      <el-button type="primary" round @click="editSave">保存</el-button>
    </div>
  </el-dialog> -->

  <!-- 新编辑弹窗 -->
  <el-dialog v-model="dialogVisible" title="编辑字典表">
    <el-form>
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input v-model="user.projectName" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item label="来源" :label-width="formLabelWidth">
        <el-input v-model="user.projectSource" style="width:200px" disabled></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" round @click="editSave">保存</el-button>
      </span>
    </template>
  </el-dialog>


  <!-- 新新增弹窗 -->
  <el-dialog v-model="dialogVisible1" title="新增字典表">
    <el-form>
      <el-form-item label="名称" :label-width="formLabelWidth">
        <el-input style="width:300px" v-model="adduser.projectName"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" round @click="addsave">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分页 -->
  <!-- <el-pagination background v-model:page-size="pageSize" @current-change="pageChange" layout="prev, pager, next"
    :total="store.state.dictionaryTable.tableTotal1" /> -->
</template>
  
<script lang="ts" setup>
import { ref } from "vue";
import { onBeforeMount } from "vue";
import axios from "@/utils/http";
import { useStore, mapMutations } from "vuex";
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const pageSize = ref(99)
const formLabelWidth = "140px";
const data: any = ref("")
const store = useStore();
const adduser = ref({
  projectName: ''
})
const user = ref(
  {
    id: '',
    projectName: '',
    projectSource: ''
  }
)
// 渲染全部数据
const setDicProjectData = mapMutations(["setDicProjectData"]).setDicProjectData.bind({
  $store: store,
});
onBeforeMount(
  () => {

    setDicProjectData()

  })
//   const pageChange = (currentPage: any) => {
//     setDicProjectData({ currentPage: currentPage, pageSize: pageSize.value })

// }

// 新增数据
const addDicProjectData = mapMutations(["addDicProjectData"]).addDicProjectData.bind({
  $store: store,
});
const add = () => {
  dialogVisible1.value = true
}
const addsave = () => {
  if (!adduser.value.projectName) {
    ElMessage({
      showClose: true,
      message: '当前页面增加数据不能为空！！！',
      type: 'warning',
    })

  }
  else {
    ElMessageBox.confirm(
      '确认数据添加无误吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',

      }
    )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '添加成功',
        })
        addDicProjectData(
          {
            name: adduser.value.projectName
          }
        )
        adduser.value.projectName='',
        setDicProjectData()
        dialogVisible1.value = false

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消添加',
        })
      })

  }




}

// 删除数据
const delDicProjectData = mapMutations(["delDicProjectData"]).delDicProjectData.bind({
  $store: store,
});
const delData = (row: any) => {
  ElMessageBox.confirm(
    '确认删除吗？',
    '温馨提示',
    {
      confirmButtonText: '确认删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      delDicProjectData({
        id: row.id
      })
      setDicProjectData()

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })



}

// 编辑数据
const editDicProjectData = mapMutations(["editDicProjectData"]).editDicProjectData.bind({
  $store: store,
});
// 拿取数据
const edit = (row: any) => {
  dialogVisible.value = true
  user.value.id = row.id
  user.value.projectName = row.projectName
  user.value.projectSource = row.projectSource

}
// 保存编辑数据
const editSave = () => {
  if (!user.value.projectName) {
    ElMessage({
      showClose: true,
      message: '项目名称不能为空！！！',
      type: 'warning',
    })
  }
  else {
    ElMessageBox.confirm(
      '确认数据修改无误吗？',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',

      }
    )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '编辑成功',
        })
        editDicProjectData({
          id: user.value.id,
          projectName: user.value.projectName,
          projectSource: user.value.projectSource
        })
        setDicProjectData()
        dialogVisible.value = false

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消编辑',
        })
      })

  }


}
</script>
  
<style scoped></style>